<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-23 17:49:33
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-16 09:22:16
 * @FilePath: /nhw/src/components/Card/CardTitle.vue
-->
<template>
  <div class="card-title-container van-hairline--bottom">
    <Row class="title" type="flex" align="center" :class="{ adorn: adorn }">
      <Col class="text">{{ text }}</Col>
      <Col span="13" style="color: #666666; text-align: center" v-if="listId"
        >{{ listId }}
        <Icon name="arrow" color="#999" v-if="listId" />
      </Col>
      <!-- 状态钮 -->
      <Col style="margin-left: auto">
        <span
          class="stateBtn"
          :class="rules[state] ? rules[state].stateClass : 'daifenpai'"
          >{{ stateText }}</span
        >
      </Col>
    </Row>
  </div>
</template>

<script>
import { Col, Row, Icon } from "vant";
export default {
  name: "Card",

  components: {
    Col,
    Row,
    Icon,
  },
  props: {
    text: {
      //单据头文字
      type: String,
    },
    listId: {
      //中间单据id
      type: [String, Number],
      default: "",
    },
    state: {
      //状态
      type: Number,
      default: 0,
    },
    //头部装饰
    adorn: {
      type: Boolean,
      default: false,
    },
    stateText: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      rules: [
        {
          stateClass: "daifenpai",
        },
        {
          stateClass: "daichuli",
        },
        {
          stateClass: "chulizhong",
        },
        {
          stateClass: "yiquxiao",
        },
        {
          stateClass: "daifenpai",
        },
        {
          stateClass: "chulizhong",
        },
        {
          stateClass: "chulizhong",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.card-title-container {
  padding: 20px;
  font-size: 28px;
  line-height: 44px;
  box-sizing: border-box;
}
.stateBtn {
  display: block;
  text-align: center;
  // width: 132px;
  height: 44px;
  box-sizing: border-box;
  line-height: 44px;
  font-size: 28px;
  margin-left: auto;
  &.daifenpai {
    color: #04b33e;
    // background: tint(#04b33e, 80%);
  }
  &.daichuli {
    color: #e0680f;
    // background: tint(#e96214, 80%);
  }
  &.chulizhong {
    color: #5922da;
    // background: tint(#5922da, 80%);
  }
  &.yiwancheng {
    color: #07df68;
    // background: tint(#07df68, 80%);
  }
  &.yiquxiao {
    color: #c2c514;
    // background: tint(#c2c514, 80%);
  }
}

.title {
  .text {
    color: #333333;
    font-size: 32px;
    font-weight: bolder;
    text-indent: 0.5em;
    text-align: left;
  }
  &.adorn::before {
    content: "";
    display: block;
    width: 5px;
    height: 30px;
    background: linear-gradient(0deg, #e0680f, #e68840);
    border-radius: 3px;
  }
  /deep/ .van-icon {
    vertical-align: -3px;
    font-size: 28px;
  }
}
</style>
